<template>
  <div class="registerbox">
    <h1>用户注册</h1>
    <div class="login_form">
      <el-form
        label-width="auto"
        :model="loginform"
        :rules="rules"
        ref="loginrule"
      >
        <el-form-item prop="account" label="用户名：">
          <el-input
            style="height: 40px"
            placeholder="请输入用户名"
            v-model="loginform.account"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password" label="密码：">
          <el-input
            style="height: 40px"
            placeholder="请输入密码"
            :show-password="true"
            v-model="loginform.password"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item prop="rePassword" label="重复密码：">
          <el-input
            style="height: 40px"
            placeholder="请输入重复密码"
            :show-password="true"
            v-model="loginform.rePassword"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱：">
          <el-input
            style="height: 40px"
            placeholder="请输入邮箱"
            v-model="loginform.email"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号：">
          <el-input
            style="height: 40px"
            placeholder="请输入手机号"
            v-model="loginform.phone"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" label="验证码：">
          <el-input
            style="height: 40px"
            placeholder="请输入验证码"
            type="number"
            v-model="loginform.regCode"
          >
            <template #append>
              <el-button @click="sendCode" :disabled="isSending || count > 0">
                {{
                  isSending
                    ? "发送中..."
                    : count > 0
                    ? `${count}秒后重试`
                    : "发送验证码"
                }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-button
            :loading="loading"
            class="login_btn"
            size="default"
            @click="login"
            type="primary"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { userregister } from "../../api/user/index";
import bus from "../../utils/bus";
import { md5 } from "js-md5";
//md5加密后的密码
// const md5Pwd=md5("123456");
// console.log(md5Pwd);

let $router = useRouter();
let isSending = ref(false);
const count = ref(0);
const sendCode = () => {
  if (count.value > 0 || isSending.value) {
    return; // 防止重复点击发送
  }

  // 假设在这个方法中实现发送验证码的逻辑
  // 可以调用sendVerificationCode()方法发送验证码
  // 这里只是简单模拟发送过程
  isSending.value = true;

  startCountdown();

  setTimeout(() => {
    // 假设发送成功后将isSending重置为false
    isSending.value = false;
  }, 2000);
};
const startCountdown = () => {
  count.value = 60;
  const timer = setInterval(() => {
    count.value--;
    if (count.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

let loginform = reactive({
  account: "",
  password: "",
  rePassword: "",
  email: "",
  phone: "",
  regCode: "",
});
let loginrule = ref();

const rulename = (rule, value, callback) => {
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error("账号至少五位！"));
  }
};
const rulepassword = (rule, value, callback) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error("密码至少六位！"));
  }
};
const rules = {
  account: [{ trigger: "change", validator: rulename }],
  password: [{ trigger: "change", validator: rulepassword }],
  rePassword: [{ trigger: "change", validator: rulepassword }],
};
const login = async () => {
  await loginrule.value.validate();
  loading.value = true;
  const res = (await userregister({
    account: loginform.account,
    password: md5(loginform.password),
    rePassword: md5(loginform.rePassword),
    email: loginform.email,
    phone: loginform.phone,
    regCode: loginform.regCode,
  })) as any;

  if (res.code == 200) {
    ElNotification({
      type: "success",
      message: "注册成功请登录~",
    });
    bus.emit("Amessage", true);
    loading.value = false;
  } else {
    ElNotification({
      type: "error",
      message: res.msg,
    });
  }
  loading.value = false;
};
let loading = ref(false);
</script>
<style lang="scss" scoped>
.header-top {
  height: 500px;
}
.registerbox {
  margin-top: -258px;
  padding-bottom: 60px;
  h1 {
    font-size: 42px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 48px;
    color: #fff;
    margin: 0;
    margin-bottom: 52px;
    text-align: center;
  }
}

.login_form {
  color: white;
  width: 1280px;
  height: 100%;
  background: #fff;
  margin: 0 auto;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  padding: 60px;
  overflow: hidden;
  form {
    width: 500px;
    margin: 30px auto 0;
  }
  .el-form-item {
    margin-bottom: 22px;
  }
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 20px;
    margin: 20px 0;
  }

  .login_btn {
    width: 335px;
    height: 48px;
    opacity: 1;
    border-radius: 4px;
  }
}
</style>
